/**
 * Created by huotaol on 2017/5/23.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, Text, View} from "react-native";
import CustomStyle from "../../../common/style/CustomStyle";
import * as Url from "../../constant/Url";
import {request} from "../../../common/util/RequestUtil";
import ModuleCommonHeader from "../../main/module/ModuleCommonHeader";
import GiftedListView from "react-native-gifted-listview";
import LoadMoreView from "../../components/LoadMoreView";
import LoadCompleteView from "../../components/LoadCompleteView";

export default class HelpCollect extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this._onFetch = this._onFetch.bind(this);
        this._renderRowView = this._renderRowView.bind(this);
    }

    render() {
        return (
            <View style={{paddingBottom: CustomStyle.getActualSizeInVertical(16), flex: 1}}>
                <ModuleCommonHeader title={'其他帮看信息'}/>
                <GiftedListView
                    rowView={this._renderRowView}
                    onFetch={this._onFetch}
                    firstLoader={true} // display a loader for the first fetching
                    pagination={true} // enable infinite scrolling using touch to load more
                    refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
                    withSections={false} // enable sections
                    renderSeparator={this._renderSeparator}
                    renderHeader={this._renderSeparator}
                    paginationWaitingView={(callback) => {
                        return <LoadMoreView click={callback}/>
                    }}
                    paginationAllLoadedView={() => <LoadCompleteView/>}
                />
            </View>
        );
    }

    _onFetch(page = 1, callback, options) {
        const url = Url.BASE_URL + '/jianding/get_list';
        const param = new FormData();
        if (page === 1) {
            this.begin = 0;
            this.total = 0;
        }

        param.append('begin', this.begin);
        param.append('total', this.total);
        param.append('max', MAX);
        request(url, 'post', param)
            .then(json => {
                console.log('_onFetch ' + json);
                const {imgPrefix, begin, total, list} = json.data;
                this.begin = begin;
                this.total = total;
                const data = list.map(item => {
                    return Object.assign({}, item, {lfImg: imgPrefix + item.lfImg, raImg: imgPrefix + item.raImg});
                });
                callback(data, {allLoaded: total <= 0});
            }).catch(err => {
            console.log('_onFetch err ' + err);
            callback([]);
        });
    }

    _renderRowView(item) {
        return <View style={{
            paddingLeft: CustomStyle.getActualSizeInHorizontal(30),
            paddingRight: CustomStyle.getActualSizeInHorizontal(30),
        }}>
            <View style={{height: CustomStyle.getActualSizeInVertical(88), justifyContent: 'center'}}>
                <Text
                    style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(26),
                        color: '#4a3d18',
                    }]}>{item.title}</Text>
            </View>
            <View style={[CustomStyle.separator]}/>
            <View
                style={{
                    flexDirection: 'row',
                    height: CustomStyle.getActualSizeInVertical(200),
                    paddingTop: CustomStyle.getActualSizeInVertical(20),
                    paddingBottom: CustomStyle.getActualSizeInVertical(20),
                }}>
                <Image source={{uri: item.lfImg}}
                       resizeMode={'contain'}
                       style={{
                           width: CustomStyle.getActualSizeInHorizontal(240),
                           height: CustomStyle.getActualSizeInVertical(160),
                       }}/>
                <View style={{
                    justifyContent: 'space-between',
                    flex: 1,
                    marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                }}>
                    <ShowText name={'表显里程数：'} value={item.mileage}/>
                    <ShowText name={'车身颜色：'} value={item.color}/>
                    <ShowText name={'VIN码：'} value={this._processVin(item.vin)}/>
                </View>
            </View>
        </View>
    }

    _renderSeparator() {
        return <View style={{height: CustomStyle.getActualSizeInVertical(20), backgroundColor: '#fffcee'}}/>
    }

    _processVin(vin) {
        return vin.substring(0, 8) + '*****' + vin.substring(13);
    }
}

class ShowText extends Component {
    static propTypes = {
        name: PropTypes.string,
        value: PropTypes.value,
    };

    render() {
        return (
            <View style={[...this.props, {
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
            }]}>
                <Text style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(26),
                    color: '#857e6e',
                }]}>{this.props.name}</Text>
                <Text style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(26),
                    color: '#4a3d18',
                }]}>{this.props.value}</Text>
            </View>
        );
    }
}


const MAX = 20;

